<%--
  Created by IntelliJ IDEA.
  User: xlro
  Date: 2021/4/25
  Time: 21:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>意见反馈</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    <link rel="stylesheet" type="text/css" href="./jQuery/css/common.css">
    <script src="jQuery/js/jquery-1.10.2.js"></script>

    <!-- css style -->
    <style>
        /*.textarea-wrapper{width:50%;margin:100px auto;}*/
        /*.textarea-block{position:relative;}*/
        /*.textarea-item{width:100%;height:200px;border:1px solid #ccc;padding:10px;resize:none;color:#aaa;}*/
        /*.textarea-count{position:absolute;bottom:10px;right:0;color:#000;}*/
    </style>
</head>
<body>

<%@include file="alert.jsp"%>
<header class='title'>
    意见反馈
</header>
<div class="box-group">
<%--    <form class='submit_form' action="/selfInfo.jsp" method="get">--%>
    <form class='submit_form' action="/sendQuest" method="post">

        <div class="item-group">
            <label>
                反馈类型
            </label>
            <select name="type">
                <option value="1">图书问题</option>
                <option value="2">个人用户问题</option>
                <option value="3">界面问题</option>
            </select>
        </div>
        <div class="item-group">
            <label>
                反馈标题
<%--                <% String username = request.getParameter("username");--%>
<%--                    out.print(request.getParameter("username")); %>--%>

                <%
                    String userId = (String)session.getAttribute("username");
                    if(userId == null){
                        session.setAttribute("username",request.getParameter("username"));
                    }
                    out.print(session.getAttribute("username"));
                %>
<%--                <% session.setAttribute("username",request.getParameter("username")); %>--%>
<%--                <% out.print(session.getAttribute("username")); %>--%>
            </label>
            <input type="text" name="title" placeholder='请输入反馈标题' required>
        </div>
        <div class="item-group item-group-desc">
            <label>
                问题描述
            </label>

            <div class="desc-group">
                <textarea name="desc" class="textarea-item" required placeholder='您宝贵的已经是我们前进的动力，请输入问题详细的描述，以便我们能更好的解决问题。' maxlength="300" spellcheck="false"></textarea>

                <div class="textarea-count">
                    <span class="textareaInput">0</span>/<span class="textareaTotal">300</span>
                </div>
                <div class='img_box'>
<%--                    <ul>--%>
<%--                        <li class='add_btn'></li>--%>
<%--                    </ul>--%>
                    <button class='submit_btn' style="margin-left: 25%;width: 50%;margin-bottom: 160px;">提交</button>
                </div>
            </div>



        </div>
        <div class="item-group item-group-mobile">
            <label>
                联系电话
            </label>
            <input type="text" name="phone" placeholder='留下您的电话，可能会联系您哦！'>
        </div>

    </form>

</div>

<!-- js files -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- js scripts -->
<script>
    $(document).ready(function(){

        var lenInput = $('.textarea-item').val().length;

        $(".textarea-item").keyup(function(){
            lenInput = $(this).val().length;
            if(lenInput>0 && lenInput<=300){
                $('.textareaInput').html(lenInput);
                $('.textarea-btn').attr('disabled',false);
            }else{
                $('.textarea-btn').attr('disabled',true);
            }
        });
    });
</script>
</body>
</html>